/* 核心修改：确保动画的起始、中间和结束都围绕一个颜色 */
@keyframes pulse-highlight {
  0% {
    /* 动画开始时，橙色光晕最大，透明度最高 */
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7);
  }
  70% {
    /* 动画过程中，光晕扩散变大，透明度降低 */
    box-shadow: 0 0 0 15px rgba(253, 126, 20, 0);
  }
  100% {
    /* 动画结束时，光晕完全消失 */
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0);
  }
}

.right-panel.highlight-flash {
  animation: pulse-highlight 5s ease-out;
}

.dispatch-page { display: flex; flex-direction: column; height: 100%; padding: 24px; background-color: #f8f9fa; gap: 20px; }
.header-bar { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; }
.page-title { font-size: 1.8rem; font-weight: 600; color: #333; margin: 0; }
.controls { display: flex; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 6px; border: none; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; }
.btn-secondary { background-color: #6c757d; color: white; }
.btn-secondary:hover { background-color: #5c636a; }
.main-layout { display: grid; grid-template-columns: 320px 1fr 320px; gap: 20px; flex-grow: 1; height: calc(100% - 60px); overflow: hidden; }
.left-panel, .center-panel, .right-panel { background: #fff; border: 1px solid #e9ecef; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; overflow: hidden; }
.panel-header { padding: 16px; font-size: 1.1rem; font-weight: 600; border-bottom: 1px solid #e9ecef; color: #343a40; flex-shrink: 0; }
.officer-list { overflow-y: auto; flex-grow: 1; padding: 8px; }
.officer-card { padding: 12px; border-radius: 6px; margin-bottom: 8px; cursor: pointer; border: 2px solid transparent; transition: all 0.2s ease-in-out; }
.officer-card:hover { background-color: #f8f9fa; }
.officer-card.selected { border-color: #0d6efd; background-color: #e7f1ff; transform: scale(1.02); }
.officer-info { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.officer-name { font-weight: 600; font-size: 1rem; color: #212529; }
.officer-department { font-size: 0.8rem; color: #6c757d; }
.officer-status { font-size: 0.85rem; padding: 2px 8px; border-radius: 12px; color: #fff; width: fit-content; margin-bottom: 6px; }
.status-空闲 { background-color: #198754; }
.status-忙碌 { background-color: #dc3545; }
.officer-skills { font-size: 0.85rem; color: #495057; }
.center-panel { padding: 0; overflow: hidden; }
.right-panel { /* 保持不变 */ }
.dispatch-info-card { padding: 16px; flex-grow: 1; overflow-y: auto; }
.info-item { margin-bottom: 20px; }
.label { display: block; font-size: 0.9rem; color: #6c757d; margin-bottom: 6px; }
.value { font-size: 1rem; font-weight: 500; word-break: break-all; }
.selected-officers .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tag { background-color: #e7f1ff; color: #0d6efd; padding: 5px 10px; border-radius: 4px; font-size: 0.9rem; display: flex; align-items: center; }
.remove-tag { margin-left: 8px; cursor: pointer; font-weight: bold; color: #0a58ca; }
.dispatch-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; border-top: 1px solid #e9ecef; flex-shrink: 0; }
.btn-ai { background-color: #0dcaf0; color: #fff; }
.btn-ai:hover { background-color: #0aa7c3; }
.btn-execute { background-color: #198754; color: #fff; }
.btn-execute:hover { background-color: #157347; }
